<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <%--常量--%>
    <%@ include file="/common/constHead.jsp"%>
    <%--jQuery--%>
    <%@ include file="/common/jqueryHead.jsp"%>
    <%--jo--%>
    <%@ include file="/common/joHead.jsp"%>
    <%--bootstrap和字体--%>
    <%@ include file="/common/bootstrapHead.jsp"%>
    <%--layer--%>
    <%@ include file="/common/layerHead.jsp"%>
    <%--日期选择--%>
    <%@ include file="/common/dateHead.jsp"%>
    <%--zTree树--%>
    <%@ include file="/common/zTreeHead.jsp"%>
    <%--上传插件--%>
    <%@ include file="/common/uploadHead.jsp"%>
    <%--公共--%>
    <%@ include file="/common/commonHead.jsp"%>
    <script src="<%=URL_STATIC%>static/plugin/echarts/echarts.js"></script>
    <title>保护地类型统计</title>
    <script type="text/javascript">
        $(function(){
           jo.postAjax("travel/reserve/ncStatis.action",{},function(json){
        	   
                if(json && json.code == "0"){
                    var title = "保护地类型统计";
                    var eg = [""];
                    var xData = new Array();
                    var coreData = [{name:'数量',type:'bar',data:[],itemStyle: {   
                        //通常情况下：
                        normal:{  
                            color: function (params){
                                var colorList =['#1d953f','#ffd400', '#33a3dc', '#f15a22', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
                                return colorList[params.dataIndex];
                            }
                        },
                        //鼠标悬停时：
                        emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },}];
                    var data = json.data;
                    for (var i=0;i<data.length;i++){
                        var item = data[i];
                        xData.push(item.name);
                        coreData[0].data.push(item.num);
                    }
                    createBarChart("orderPic",title,eg,xData,coreData);
                	//饼
                	var eg2 = new Array();
                	var coreData2 = new Array();
                	for(var i = data.length;i>0;i--){
                		var item = data[i-1];
                		eg2.push(item.name);
                		coreData2.push({value:item.num,name:item.name});
                	}
                	createPieChart("pie","各保护地类型比例",eg2,coreData2);
                }
           });
        });
        //创建饼状图
        function createPieChart(sEleId,sTitle,aEg,aCoreData){
        	var option = {
        			title:{
        				text:sTitle,
        				x:'center'
        			},
        			tooltip:{
        				trigger:'item',
        				formatter:"{a} <br/>{b} : {c} ({d}%)"
        			},
        			 legend: {
                         orient: 'vertical',
                         left: 'left',
                         data: aEg
                     },
                     series : [
                         {
                             name: '保护地类型占比',
                             type: 'pie',
                             radius : '55%',
                             center: ['50%', '60%'],
                             data:aCoreData,
                             itemStyle: {
                                 emphasis: {
                                     shadowBlur: 10,
                                     shadowOffsetX: 0,
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             }
                        }
                   ]
        	};
            var myChart = echarts.init(document.getElementById(sEleId));
            myChart.setOption(option);
            return myChart;
        }
        //创建柱状图
        function createBarChart(sEleId,sTitle,aEg,aXData,aCoreData){
            var option = {
                title:{
                    text:sTitle
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'shadow'
                    }
                },
                legend:{
                    data:aEg
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    y2:140,
                    containLabel: true
                },
                xAxis:{
                    type:'category',
                    data:aXData,
                    axisLabel: {  
                    	   interval:0,  
                    	   rotate:40
                    	}  
                },
                yAxis:{
                    type:'value',
                    boundaryGap: [0, 0.01]
                },
                series: aCoreData
            };
            var myChart = echarts.init(document.getElementById(sEleId));
            myChart.setOption(option);
            return myChart;
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div id="orderPic" style="width: 100%;height: 600px;"></div>
        </div>
          <div class="col-xs-6">
            <div id="pie" style="width: 100%;height: 600px;"></div>
        </div>
    </div>
</div>

<script src="<%=URL_STATIC%>static/plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
